import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { todoClearDoned } from '../../store/actions/todo'

export default function TodoFooter() {
  const dispatch = useDispatch()
  const allTodo = useSelector((state) => state.todo)
  // 统计未完成数据：从所有数据里面找未完成的 length
  const leftCount = allTodo.filter((item) => !item.done).length
  const handleClearDoned = () => dispatch(todoClearDoned())
  return (
    <footer className='footer'>
      <span className='todo-count'>
        <strong>{leftCount}</strong> item left
      </span>
      <ul className='filters'>
        <li>
          <a className='selected' href='#/'>
            All
          </a>
        </li>
        <li>
          <a href='#/active'>Active</a>
        </li>
        <li>
          <a href='#/completed'>Completed</a>
        </li>
      </ul>
      <button className='clear-completed' onClick={handleClearDoned}>
        Clear completed
      </button>
    </footer>
  )
}
